<template>
	<view class="reserve-container">
		<view class="status-bar"></view>
		<!-- 状态筛选tabs -->
		<u-tabs :list="tabList" :current="current" @change="tabChange" :is-scroll="false" active-color="#2979ff"
			bar-width="50"></u-tabs>

		<!-- 搜索栏 -->
		<view class="search-box">
			<u-search v-model="searchKeyword" placeholder="搜索会议室名称" :show-action="false" @search="search"
				@custom="search"></u-search>
		</view>

		<!-- 列表内容 -->
		<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh"
			refresher-enabled :refresher-triggered="isRefreshing" lower-threshold="50">
			<view class="reserve-list">
				<view class="reserve-item" v-for="(item, index) in reserveList" :key="item.id"
					@click="viewDetail(item)">
					<view class="reserve-header">
						<view class="room-name">{{ item.roomName }}</view>
						<view class="reserve-status" :class="`status-${item.status}`">
							{{ getStatusText(item.status) }}
						</view>
					</view>

					<view class="reserve-info">
						<view class="info-item">
							<u-icon name="calendar" size="30" color="#666"></u-icon>
							<text class="info-text">{{ item.reserBegDate }} 至 {{ item.reserEndDate }}</text>
						</view>
						<view class="info-item" v-if="item.nickName">
							<u-icon name="account" size="30" color="#666"></u-icon>
							<text class="info-text">{{ item.nickName }}</text>
						</view>
						<view class="info-item" v-if="item.mobilephone">
							<u-icon name="phone" size="30" color="#666"></u-icon>
							<text class="info-text">{{ item.mobilephone }}</text>
						</view>
						<view class="info-item">
							<u-icon name="home" size="30" color="#666"></u-icon>
							<text class="info-text">{{ item.departmentName }}</text>
						</view>
						<!-- <view class="info-item">
							<u-icon name="rmb-circle" size="14" color="#666"></u-icon>
							<text class="info-text">¥{{ item.reserPrice + item.servicePrice }}</text>
						</view> -->
						<view class="info-item" v-if="item.description">
							<u-icon name="chat" size="30" color="#666"></u-icon>
							<text class="info-text">{{ item.description }}</text>
						</view>
					</view>

					<view class="reserve-footer">
						<text class="create-time">创建时间：{{ formatDate(item.creatorTime) }}</text>
					</view>
				</view>
			</view>

			<!-- 上拉加载更多 -->
		</scroll-view>

		<!-- 空数据提示 -->
		<view class="empty-box" v-if="reserveList.length === 0 && !isLoading">
			<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
			<text class="empty-text">暂无预约记录</text>
		</view>
		<uni-fab :popMenu="false" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" @fabClick="addReserve"></uni-fab>
	</view>
	
</template>

<script>
	
	export default {
		data() {
			return {
				// 当前选中tab
				current: 0,
				// tab列表
				tabList: [
					{
						name: '待确认',
						value: 1
					},
					{
						name: '已确认',
						value: 2
					},
					{
						name: '已驳回',
						value: 3
					},
					{
						name: '已取消',
						value: 0
					},{
						name: '全部',
						value: undefined
					}
				],
				// 搜索关键词
				searchKeyword: '',
				// 预约列表
				reserveList: [],
				// 分页参数
				pageNum: 1,
				pageSize: 10,
				total: 0,
				// 加载状态
				isLoading: false,
				isRefreshing: false,
				loadMoreStatus: 'more', // more-加载前 loading-加载中 noMore-没有更多了
				// 加载更多文字提示
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 查询参数
				queryParams: {
					status: 1,
					roomId: '',
					typeId: '',
					locationId: '',
					StartDate: null,
					EndDate: null,
					finstatus: null
				},
				// 驳回弹窗
				rejectModal: {
					show: false,
					title: '驳回预约',
					content: '',
					reason: '',
					item: null
				},
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				}
			}
		},
		created() {
			this.getReserveList()
		},
		methods: {
			// 获取预约列表
			getReserveList(type = 'add') {
				if (this.isLoading) return
				this.isLoading = true
				var query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams
				}
				this.$u.api.getMyReserve(query).then(res => {
					this.total = res.data.pagination.total

					// 根据类型处理数据
					if (type === 'refresh') {
						this.reserveList = res.data.list
						this.isRefreshing = false
					} else {
						this.reserveList = [...this.reserveList, ...res.data.list]
					}

					// 判断是否还有更多数据
					if (this.reserveList.length >= this.total) {
						this.loadMoreStatus = 'noMore'
					} else {
						this.loadMoreStatus = 'more'
					}

					this.isLoading = false
				})

			},

			addReserve() {
				uni.navigateTo({
					url: `/pages/meeting/myreserve/AddForm`
				})
			},

			// 下拉刷新
			refresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.loadMoreStatus = 'more'
				this.getReserveList('refresh')
			},

			// 上拉加载更多
			loadMore() {
				if (this.loadMoreStatus !== 'more') return

				this.loadMoreStatus = 'loading'
				this.pageNum += 1
				this.getReserveList()
			},

			// Tab切换
			tabChange(index) {
				this.current = index
				this.queryParams.status = this.tabList[index].value
				this.pageNum = 1
				this.reserveList = []
				this.loadMoreStatus = 'more'
				this.getReserveList('refresh')
			},

			// 搜索
			search() {
				this.pageNum = 1
				this.reserveList = []
				this.loadMoreStatus = 'more'
				this.getReserveList('refresh')
			},

			// 查看详情
			viewDetail(item) {
				// 实际开发中跳转到详情页
				uni.navigateTo({
					url: `/pages/meeting/myreserve/AddForm?id=${item.id}`
				})
			},

			// 获取状态文本
			getStatusText(status) {
				switch (status) {
					case 0:
						return '已取消'
					case 1:
						return '待确认'
					case 2:
						return '已确认'
					case 3:
						return '已驳回'
					default:
						return '未知状态'
				}
			},

			// 格式化日期
			formatDate(date) {
				if (!date) return ''
				const d = new Date(date)
				const year = d.getFullYear()
				const month = (d.getMonth() + 1).toString().padStart(2, '0')
				const day = d.getDate().toString().padStart(2, '0')
				const hour = d.getHours().toString().padStart(2, '0')
				const minute = d.getMinutes().toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}`
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.reserve-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		background-color: #ffffff;
		position: relative;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
	}

	.nav-bar-title {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
	}

	.search-box {
		padding: 10px;
		background-color: #ffffff;
	}

	.scroll-view {
		flex: 1;
		width: 100%;
	}

	.reserve-list {
		padding: 10px;
	}

	.reserve-item {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.reserve-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.room-name {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.reserve-status {
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.status-0 {
		background-color: #f2f2f2;
		color: #999999;
	}

	.status-1 {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-2 {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.status-3 {
		background-color: #fff2f0;
		color: #ff4d4f;
	}

	.reserve-info {
		margin-bottom: 10px;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.info-text {
		margin-left: 5px;
		font-size: 14px;
		color: #666666;
	}

	.reserve-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.create-time {
		font-size: 12px;
		color: #999999;
	}

	.operate-btns {
		display: flex;
	}

	.operate-btns button {
		margin-left: 10px;
	}

	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty-image {
		width: 120px;
		height: 120px;
		margin-bottom: 16px;
	}

	.empty-text {
		font-size: 14px;
		color: #999999;
	}
</style>
